<template>
  <view class="settings-container">
    <view class="menu-list">
      <view class="menu-item" @click="navTo('/pages/settings/account')">
        <text class="icon">👤</text>
        <text class="title">账号与安全</text>
        <uni-icons type="forward" size="16" color="#999" />
      </view>
      <view class="menu-item">
        <text class="icon">🔔</text>
        <text class="title">消息通知</text>
        <switch :checked="notificationEnabled" @change="handleNotificationChange" />
      </view>
      <view class="menu-item" @click="navTo('/pages/settings/about')">
        <text class="icon">ℹ️</text>
        <text class="title">关于我们</text>
        <uni-icons type="forward" size="16" color="#999" />
      </view>
    </view>
    
    <button class="logout-btn" @click="handleLogout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notificationEnabled: true
    }
  },
  methods: {
    handleNotificationChange(e) {
      this.notificationEnabled = e.detail.value
      if (!uni.getStorageSync('userInfo')) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        this.notificationEnabled = false
        return
      }
      
      uni.setStorageSync('notification-setting', this.notificationEnabled)
      const userInfo = uni.getStorageSync('userInfo')
      uni.setStorageSync(`notification-setting-${userInfo.id}`, this.notificationEnabled)
      uni.showToast({
        title: this.notificationEnabled ? '通知已开启' : '通知已关闭'
      })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (!res.confirm) return
          // 清除用户相关数据
          const userInfo = uni.getStorageSync('userInfo')
          uni.removeStorageSync('userInfo')
          uni.removeStorageSync(`notification-setting-${userInfo.id}`)
          this.notificationEnabled = false
          uni.$emit('user-logout')
          uni.reLaunch({ url: '/pages/index/index' })
        }
      })
    },
    navTo(path) {
      uni.navigateTo({ url: path })
    }
  },
  onShow() {
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
      this.notificationEnabled = uni.getStorageSync(`notification-setting-${userInfo.id}`) ?? true
    } else {
      this.notificationEnabled = false
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  padding: 30rpx;
  
  .menu-list {
    background: #fff;
    border-radius: 16rpx;
    
    .menu-item {
      display: flex;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
      
      &:last-child {
        border-bottom: none;
      }
      
      .icon {
        margin-right: 20rpx;
        font-size: 40rpx;
      }
      
      .title {
        flex: 1;
        font-size: 28rpx;
      }
    }
  }
  
  .logout-btn {
    margin-top: 40rpx;
    background: #fff;
    color: #e64340;
    border-radius: 50rpx;
  }
}
</style> 